CSS Refactoring by Steve Lindstrom

Author:Steve Lindstrom
Language: eng
Format: epub, mobi
Publisher: O'Reilly Media, Inc.
Published: 2016-11-25T05:00:00+00:00

When a group of tabs present in a .tab-group-vertical element are rendered using the CSS in Example 4-11 you’ll see the tabs in Figure 4-2.

Figure 4-2. Vertical tabs

These tabs aren’t quite right yet, but we’ll take care of that next by delegating the assignment of dimensions to the component’s structural container.

Delegate the Assignment of Dimensions to Structural Containers

You may have noticed that in the CSS we wrote for the .tab-group and .tab-group-vertical components’ dimensions weren’t specified. This omission was intentional, because the responsibility for assigning dimensions should be delegated to the structure that contains the component or component group. Structural styles, described in the next section, are styles that dictate the basic structure of a page. There are any number of different layouts you can build, including those with sidebars, columns, or whatever you dream up.

Components are intended to be reusable, so it’s difficult to predict all of the different places where they’ll appear. This is why it’s important to delegate the responsibility of setting dimensions to the elements that are actually housing the components.

For example, let’s assume that we want to display two horizontal groups of tabs that each occupy 50% of the available visible area for desktop browsers, as shown in Figure 4-3. We could add a width: 50% declaration to the .tab-group definition, but that wouldn’t be very reusable if we needed to use the tabs at a different width elsewhere. Instead, Example 4-12 delegates the responsibility of setting dimensions to a structural element that has the .tabbed-pane class. You probably wouldn’t want to use this many different sets of tabs on the same page, but the example is merely intended as an illustration of how to delegate the responsibility of setting dimensions.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.